<template>
  <div class="app-container">
    <el-tabs v-model="active">
      <el-tab-pane label="教练-科目" name="subject">
        <el-row :gutter="10" class="mb8">
          <el-col :span="8">
            <el-select v-model="staffId" filterable remote clearable placeholder="选择教练"
              :remote-method="searchInstructors" :loading="loadingInstructors" style="width:100%"
              @visible-change="onInstructorVisible">
              <el-option v-for="i in instructorOptions" :key="i.staffId" :label="i.name + '（' + i.staffNo + '）'" :value="i.staffId" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="loadInstructorSubjects" :disabled="!staffId">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-card>
              <div slot="header">已授科目</div>
              <el-table :data="instructorSubjects">
                <el-table-column label="科目ID" prop="subjectId" width="120" />
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="unassignSubject(scope.row.subjectId)">取消</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header">所有科目</div>
              <el-table :data="subjects">
                <el-table-column label="编码" prop="subjectCode" width="120" />
                <el-table-column label="名称" prop="subjectName" />
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="assignSubject(scope.row.subjectId)">分配</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="教练-学员" name="student">
        <el-row :gutter="10" class="mb8">
          <el-col :span="8">
            <el-select v-model="staffId2" filterable remote clearable placeholder="选择教练"
              :remote-method="searchInstructors" :loading="loadingInstructors" style="width:100%"
              @visible-change="onInstructorVisible">
              <el-option v-for="i in instructorOptions" :key="i.staffId + '_2'" :label="i.name + '（' + i.staffNo + '）'" :value="i.staffId" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="loadInstructorStudents" :disabled="!staffId2">查询</el-button>
          </el-col>
          <el-col :span="6">
            <div>学员数：{{ studentCount }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-card>
              <div slot="header">已分配学员</div>
              <el-table :data="instructorStudents">
                <el-table-column label="学员ID" prop="studentId" width="120" />
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" @click="unassignStudent(scope.row.studentId)">取消</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header">快速分配学员</div>
              <el-select v-model="newStudentId" filterable remote clearable placeholder="选择学员"
                :remote-method="searchStudents" :loading="loadingStudents" style="width:100%" class="mb8"
                @visible-change="onStudentVisible">
                <el-option v-for="s in studentOptions" :key="s.studentId" :label="s.name + '（' + s.studentNo + '）'" :value="s.studentId" />
              </el-select>
              <el-input v-model="newRemark" placeholder="备注(可选)" class="mb8" />
              <el-button type="primary" @click="assignStudent" :disabled="!staffId2 || !newStudentId">分配</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listSubjects, listInstructorSubjects, addInstructorSubject, removeInstructorSubject, listInstructorStudents, countInstructorStudents, addInstructorStudent, removeInstructorStudent } from '@/api/jiaxiao/assign'
import { listStaff } from '@/api/jiaxiao/staff'
import { listStudent } from '@/api/jiaxiao/student'

export default {
  name: 'JxAssign',
  data() {
    return {
      active: 'subject',
      subjects: [],
      staffId: undefined,
      instructorSubjects: [],
      staffId2: undefined,
      instructorStudents: [],
      newStudentId: undefined,
      newRemark: '',
      studentCount: 0,
      instructorOptions: [],
      studentOptions: [],
      loadingInstructors: false,
      loadingStudents: false
    }
  },
  created() {
    listSubjects().then(res => { this.subjects = res.data || [] })
  },
  methods: {
    onInstructorVisible(visible) {
      if (visible && (!this.instructorOptions || this.instructorOptions.length === 0)) {
        this.loadingInstructors = true
        listStaff({ pageNum: 1, pageSize: 10 }).then(res => {
          this.instructorOptions = res.rows || []
          this.loadingInstructors = false
        }).catch(() => { this.loadingInstructors = false })
      }
    },
    onStudentVisible(visible) {
      if (visible && (!this.studentOptions || this.studentOptions.length === 0)) {
        this.loadingStudents = true
        listStudent({ pageNum: 1, pageSize: 10 }).then(res => {
          this.studentOptions = res.rows || []
          this.loadingStudents = false
        }).catch(() => { this.loadingStudents = false })
      }
    },
    loadInstructorSubjects() {
      if (!this.staffId) return
      listInstructorSubjects(this.staffId).then(res => { this.instructorSubjects = res.data || [] })
    },
    assignSubject(subjectId) {
      if (!this.staffId) return this.$message.warning('请选择教练')
      addInstructorSubject(this.staffId, subjectId).then(() => { this.$message.success('分配成功'); this.loadInstructorSubjects() })
    },
    unassignSubject(subjectId) {
      removeInstructorSubject(this.staffId, subjectId).then(() => { this.$message.success('已取消'); this.loadInstructorSubjects() })
    },
    loadInstructorStudents() {
      if (!this.staffId2) return
      listInstructorStudents(this.staffId2).then(res => { this.instructorStudents = res.data || [] })
      countInstructorStudents(this.staffId2).then(res => { this.studentCount = res.data || 0 })
    },
    assignStudent() {
      if (!this.staffId2 || !this.newStudentId) return this.$message.warning('请选择教练与学员')
      addInstructorStudent(this.staffId2, this.newStudentId, this.newRemark).then(() => { this.$message.success('分配成功'); this.newStudentId = undefined; this.newRemark = ''; this.loadInstructorStudents() })
    },
    unassignStudent(studentId) {
      removeInstructorStudent(this.staffId2, studentId).then(() => { this.$message.success('已取消'); this.loadInstructorStudents() })
    },
    searchInstructors(query) {
      this.loadingInstructors = true
      listStaff({ pageNum: 1, pageSize: 10, name: query }).then(res => {
        this.instructorOptions = res.rows || []
        this.loadingInstructors = false
      }).catch(() => { this.loadingInstructors = false })
    },
    searchStudents(query) {
      this.loadingStudents = true
      listStudent({ pageNum: 1, pageSize: 10, name: query }).then(res => {
        this.studentOptions = res.rows || []
        this.loadingStudents = false
      }).catch(() => { this.loadingStudents = false })
    }
  }
}
</script>

<style scoped>
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
</style>


